<template>
  <div class="container">
    <cons-card :name="tomorrowData.name" :allIndex="tomorrowData.all"></cons-card>
    <tomorrow-list :data="tomorrowData"></tomorrow-list>
  </div>
</template>

<script>
import { computed, onMounted, ref, onActivated } from 'vue';
import { useStore } from 'vuex';
import getData from '@/services';
import TomorrowList from '@/components/List/Tomorrow';

export default {
  name: 'TomorrowPage',

  components: {
    TomorrowList
  },

  setup () {
    const store = useStore(),
          state = store.state,
          status = ref('');

    onMounted (() => {  
      getData(store);
      status.value = state.consName;
    })

    onActivated(() => {
      if (status.value !== state.consName) {
        status.value = state.consName;
        getData(store);
      }
    })

    return {
      tomorrowData: computed(() => state.tomorrow)
    }
  }
}
</script>

<style lang='scss' scoped>

</style>